<template>
    <div style="width: 100%;height: 100%;padding: 1px;position:relative;">
        <v-chart
                :option="topologyOption"
                :style="{ width: '100%', height: '100%' }"
                autoresize
        ></v-chart>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                //简单配置
                simpleOption: {
                    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
                    yAxis: { type: 'value' },
                    series: [{ type: 'bar', data: [5, 20, 36] }]
                },
                topologyOption:{
                    title: {
                        text: '系统拓扑图',
                        left: 'center',
                        textStyle: { fontSize: 16 }
                    },
                    tooltip: {
                        trigger: 'item', // 节点/连线触发提示
                        formatter: params => {
                            // 自定义提示内容
                            if (params.dataType === 'node') {
                                return `<div>节点：${params.data.name}</div><div>类型：${params.data.type}</div>`
                            } else if (params.dataType === 'edge') {
                                return `<div>连线：${params.data.source} → ${params.data.target}</div>`
                            }
                        }
                    },
                    // 关系图核心配置
                    series: [
                        {
                            type: 'graph', // 类型为关系图
                            layout: 'force', // 布局方式：力引导布局（可选：circular-环形布局）
                            symbolSize: 50, // 节点默认大小
                            roam: true, // 允许拖拽、缩放
                            label: {
                                show: true, // 显示节点名称
                                position: 'inside', // 名称位置：节点内部
                                fontSize: 12
                            },
                            edgeLabel: {
                                show: true, // 显示连线标签（可选）
                                formatter: params => params.data.relation, // 连线标签内容
                                fontSize: 10
                            },
                            // 节点数据
                            nodes: [
                                { name: '核心节点A', type: '服务器', symbolSize: 60, itemStyle: { color: '#409EFF' } },
                                { name: '节点B', type: '数据库', itemStyle: { color: '#67C23A' } },
                                { name: '节点C', type: '前端服务', itemStyle: { color: '#E6A23C' } },
                                { name: '节点D', type: '后端服务', itemStyle: { color: '#F56C6C' } },
                                { name: '节点E', type: '缓存服务', itemStyle: { color: '#909399' } },
                                { name: '节点F', type: '网关', itemStyle: { color: '#722ED1' } }
                            ],
                            // 连线数据
                            links: [
                                { source: '核心节点A', target: '节点B', relation: '数据交互' },
                                { source: '核心节点A', target: '节点C', relation: '请求转发' },
                                { source: '核心节点A', target: '节点D', relation: '业务调用' },
                                { source: '节点B', target: '节点E', relation: '缓存同步' },
                                { source: '节点D', target: '节点B', relation: '数据读写' },
                                { source: '节点F', target: '核心节点A', relation: '流量入口' }
                            ],
                            // 力引导布局参数调整（可选）
                            force: {
                                repulsion: 200, // 节点间排斥力（越大越分散）
                                edgeLength: 150, // 连线长度（越小越紧凑）
                                gravity: 0.1 // 节点向中心的引力（越大越集中）
                            },
                            // 节点/item样式
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 2,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            // 连线样式
                            lineStyle: {
                                width: 2,
                                color: '#ccc',
                                curveness: 0.1 // 连线曲率（0为直线，1为最大曲线）
                            }
                        }
                    ]
                },
            }
        },
        mounted() {
        },
        methods: {

        },
    }
</script>
<style lang="scss">
    //引用外部scss，不能使用scoped
    @import './t002/CustomTooltip';
    @import './t002/CustomPopupMenu';
</style>